<template>
  <div style="background: #fff; padding: 60px 122px">
    <div class="fc">
      <div class="Title"><span class="cos">{{ state.tital }}站点活动列表</span> / <span class="cos">{{ state.siteName }}</span> / {{ state.reporeName }}</div>
      <div class="backBtn" @click="backRouterView">返回</div>
    </div>
    <!-- 展示和编辑表格 -->
    <el-scrollbar style="margin-bottom: 20px" height="700px">
      <div id="appView" style="padding: 30px 0 0 100px;">
        <template v-for="(i, j) in state.reportList" :key="j">
        <div class="caseTitle">
          <div class="line"></div>
          <div style="letter-spacing: 0.1rem">{{ i.title }}</div>
        </div>
        <div style="margin-bottom: 10px">情况说明</div>
        <div class="textBox">{{ i.situation }}</div>
        <div style="margin-bottom: 10px">问题说明</div>
        <div class="textBox">{{ i.problem }}</div>
        <div style="margin-bottom: 15px">展位图片</div>
        <div class="showImgBox">
          <!-- <el-image
            v-for="(item, index) in i.line_pic"
            preview-teleported="true"
            :initial-index="0"
            :preview-src-list="i.bigline_pic"
            :key="index"
            class="imgItem"
            :src="item"
            :fit="fit"
          /> -->
          <img @click="openBigurl(i.bigline_pic)" class="imgItem" v-for="(item, index) in i.line_pic" :key="index" :src="item" crossorigin="anonymous">
        </div>
        <div class="linkBtn_a">
          <el-popover placement="left" :width="730" trigger="hover">
            <template v-slot="scope">
              <div v-for="(g, y) in i.bigline_pic" :key="y">{{ g }}</div>
            </template>
            <template #reference>
              <div v-if="state.isShowshot" class="linkBtn">图片链接</div>
            </template>
          </el-popover>
        </div>
        <div style="display: flex; margin-top: 15px; margin-bottom: 30px">
          <div style="margin: 10px 15px 10px 0px">结果</div>
          <el-radio-group fill="#409eff" v-model="i.status" size="default">
            <el-radio-button label="正常" />
            <el-radio-button label="异常" />
          </el-radio-group>
        </div>
      </template>
      </div>
      <div class="btnBox">
        <div v-if="state.isShowshot && state.reportList.length != 0" class="linkBtn" @click="clickScreenshot">
          点击截图
        </div>
      </div>
    </el-scrollbar>

     <!-- 显示轮播图片弹窗 -->
     <div class="swiperBox" style="z-index: 2000;" v-if="state.showModel">
      <div class="mask">
        <div class="connect">
          <el-carousel style="width: 100%;" height="600px" indicator-position="none">
            <el-carousel-item v-for="item in state.bigImgList" :key="item" style="height: 600px;">
              <img :src="item" style="width: 100%; height: 100%;">
            </el-carousel-item>
          </el-carousel>
      </div>
        <img @click="closeModel" src="https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/HqAr2023/%E5%85%B3%E9%97%AD2.png" style="width: 45px; height: 45px; ">
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { toRefs, reactive, computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import router from "../router/index";
import http from "../libs/http";
import html2canvas from "html2canvas";

const state = reactive({
  sidVal: "",
  tidval: "",
  levelVal: "",
  statusVal: "",
  reportList: "",
  radioState: "",

  tital: "",
  siteName: "",
  reporeName:"",
  isShowshot: false, //是否显示截图按钮
  showModel: false,
  bigImgList:''
});

// 初始化页面数据
onMounted(() => {
  // 接受传进来的参数
  const route = useRoute();
  //     console.log(
  //     "route接受到的参数>>>>>>>>>>>>>>>>",
  //     Number(route.query.sid),
  //     '????????站点ID',
  //     Number(route.query.tid),
  //     ">>>>>>>>>>>>>>>",
  //     route.query.level,
  //     route.query.status
  //   );
  state.sidVal = Number(route.query.sid);
  state.tidval = Number(route.query.tid);
  state.levelVal = Number(route.query.level);
  state.statusVal = Number(route.query.status);
  state.tital = route.query.titleName
  state.siteName = route.query.siteName
  state.reporeName = route.query.reportTitle
  getReportLists();
});

// 获取报告列表数据
const getReportLists = async () => {
  let param = {
    openid: localStorage.getItem("openid"),
    sid: state.sidVal,
    sitetype: state.tidval,
    table_level: state.levelVal,
    type_status: state.statusVal,
  };
  console.log(">>>>>>>>>>>接口需要的接口参数", param);
  const res = await http.$get("/apies/backend/getReportLists", param);
  if (res.code == 200) {
    console.log("请求接口参数成功啦啦啦啦啦啦啦啦啦", res.data);
    let newReport = [];
    res.data.map((i) => {
      newReport.push({
        bigline_pic: i.bigline_pic,
        line_pic: i.line_pic,
        problem: i.problem,
        situation: i.situation,
        status: i.status == 1 ? "正常" : i.status == 0 ? "异常" : "",
        title: i.title,
      });
    });
    state.reportList = newReport;
    if (newReport.length != 0) {
      state.isShowshot = true
    }
  } else {
    console.log(">>>>>>>>>>接口数据请求失败");
  }
};
// 路由页面回退
const backRouterView = () => {
  router.go(-1)
}

// -----截图开始------
//图片格式转换方法
const dataURLToBlob = (dataurl) => {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
};
// 截取页面长图
const clickScreenshot = () => {
  // 点击按钮,截图时隐藏掉
  state.isShowshot = false;
  var app = document.getElementById("appView");
  let width = app.offsetWidth + 200;
  let height = app.offsetHeight + 600;
  let offsetTop = app.offsetTop;
  let canvas = document.createElement("canvas");
  let context = canvas.getContext('2d');
  let scaleBy = getPixelRatio(context);
  canvas.width = width*scaleBy;
  canvas.height = (height+offsetTop)*scaleBy;
  context.scale(scaleBy,scaleBy);

  setTimeout(() => {
    html2canvas(app, {
      allowTaint:true,
      tainttest:true,
      useCORS: true,
      logging: true,
      scrollY: 0,
      width:width,
      height:height,
      scale:scaleBy, //解决手机一直空白的问题
      canvas:canvas,
      dpi: window.devicePixelRatio * 2, //设备的象素比s
      timeout: 500, // 加载延时
    }).then((canvas) => {
      // let url = canvas.toDataURL(); //把canvas转成base64
      // // 写一个隐藏的按标签，借助按标签的download属性下载图片
      // document.querySelector("#downimg").href = url;
      // document.querySelector("#downimg").download = "img.png";
      // document.querySelector("#downimg").click();
      // state.isShowshot = true;
      console.log(canvas,'>>>>>>>>>>>>>>>>>>>>截取的canvas全图')

      const dataImg = new Image() 
      // 解决跨域 Canvas 污染问题
      dataImg.setAttribute("crossOrigin", "anonymous");
      dataImg.src = canvas.toDataURL('image/png')
      let blob = dataURLToBlob(dataImg.src)
      // 显示一个弹窗
      console.log(blob,'======================', URL.createObjectURL(blob));
      // 转化图片格式,再下载图片
      const alink = document.createElement("a");
      alink.style.display = "none";
      alink.href = dataImg.src;
      // alink.href = URL.createObjectURL(blob);
      alink.download = "Img.jpg";
      document.body.appendChild(alink);
      alink.click();
      document.body.removeChild(alink);
      // console.log(dataImg.src, '======================');    
      state.isShowshot = true;

      // canvas.style.width = width+"px";
      // canvas.style.height = height+"px";
      // var image = new Image();
      // image.src = canvas.toDataURL(); 
      // console.log(image,'>>>>>>>>>>>>')
      // state.isShowshot = true;
    });
  }, 2000);
};
 
const getPixelRatio = (context) => {
    var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
      return (window.devicePixelRatio || 1) / backingStore;
}
// -----结束------

// 点击放大图片
const openBigurl = (e) => {
  state.showModel = true
  let bigPicList = JSON.parse(JSON.stringify(e))
  state.bigImgList = bigPicList
  console.log(bigPicList,'>>>>>>>>>>>>>>>拿到图片数组')
}

const closeModel = (e) => {
  state.showModel = false
}

</script>
  
  <style scoped>
.Title {
  /* font-weight: 600; */
  font-size: 20px;
  margin-bottom: 20px;
  margin-left: 50px
}
.caseTitle {
  display: flex;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}
.line {
  width: 4px;
  height: 28px;
  background-color: #409eff;
  margin-right: 10px;
}
.textBox {
  width: 772px;
  height: auto;
  padding: 10px;
  background-color: #f7f7f7;
  box-sizing: border-box;
  border-radius: 5px;
  margin-bottom: 20px;
  word-wrap: break-word;
}
/* 展示图片的盒子 */
.showImgBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
/* 链接按钮 */
.linkBtn {
  width: 112px;
  height: 45px;
  background: #409eff;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 17px;
  margin-right: 20px;
  cursor: pointer;
}
.linkBtn_a {
  width: 100%;
  display: flex;
  justify-content: end;
}
.imgItem {
  width: 320px;
  height: 248px;
  border-radius: 5px;
  margin-right: 35px;
  margin-bottom: 20px;
}
.cos {
  color: #D93442;;
}

.fc {
  display: flex;
  justify-content: space-between;
}
.backBtn {
  width: 55px;
  height: 35px;
  background: #F7F7F7;
  border: 2px solid #E4E6EA;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
}

/* 轮播图片样式 */
.swiperBox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.99;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  user-select: none;
}
.connect {
  position: static;
  width: 800px;
  height: 600px;
  /* background-color: #fff; */
  background-color: rgba(255, 255, 255, 1);
  margin-bottom: 15px;
}
.btnBox {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>